[data-type="checkbox"],
[data-type="radio"] {
  & [data-disabled] {
    opacity: 30%;
  }

  & .formkit-label {
    user-select: none;
    padding: 0;
    margin: 0;
  }

  & .formkit-wrapper {
    display: flex;
    align-items: center;
  }

  & .formkit-input {
    appearance: none;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    opacity: 0;
    left: -999em;
  }

  & .formkit-input ~ .formkit-decorator {
    background: var(--fk-bg-decorator);
    display: block;
    box-sizing: content-box;
    width: var(--fk-box-size);
    height: var(--fk-box-size);
    flex: 0 0 var(--fk-box-size);
    border: none;
    box-shadow: var(--fk-border-box-shadow);
    border-radius: var(--fk-border-radius);
    margin: var(--fk-margin-decorator);
    position: relative;
  }

  & .formkit-input ~ .formkit-decorator .formkit-icon {
    width: 0;
    height: 0;
    position: absolute;
    padding: 3px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    pointer-events: none;
  }

  & .formkit-input ~ .formkit-decorator .formkit-icon svg {
    height: 100%;
  }

  & .formkit-input:checked ~ .formkit-decorator {
    box-shadow: var(--fk-border-box-shadow-decorator-checked);
  }

  & .formkit-input:checked ~ .formkit-decorator .formkit-icon {
    width: 100%;
    height: 100%;
  }

  & .formkit-input:checked ~ .formkit-decorator .formkit-icon {
    color: var(--fk-color-border-focus);
  }

  & .formkit-input:focus ~ .formkit-decorator {
    box-shadow: var(--fk-border-box-shadow-decorator-focus);
    outline: var(--fk-focus-ring) solid var(--fk-focus-ring-color);
  }

  & .formkit-input:focus-visible ~ .formkit-decorator {
    box-shadow: var(--fk-border-box-shadow-decorator-focus-visible);
  }

  & .formkit-options {
    margin: var(--fk-checkbox-options-margin);
    padding: 0;
  }

  & .formkit-option {
    list-style-type: none;
    margin: var(--fk-margin-option);
  }

  & .formkit-option:last-child {
    margin-bottom: 0;
  }

  & fieldset.formkit-fieldset {
    border: var(--fk-border);
    border-radius: var(--fk-border-radius);
  }
}

[data-type="radio"] {
  & .formkit-input ~ .formkit-decorator .formkit-icon {
    padding: 5px;
  }
}
